//定义主题颜色
$themes: (
	theme-day: (//白天样式
		bg-color: #F1F1F1,
		
		margin-color: #f5f5f9,
		btn-color: #eaeaea,
		btn-color2: #eaf0f9,
		btn-color3: #f7f7fb,
		box-bg-color: #f7f7fb,
		box-bg-color2: #3e536c,
		box-bg-color3: #fff,
		
		pop-bg-color: rgba(255, 255, 255, .9),
		
		input-border-color1: #e2e4ea,
		input-border-color2: #c5cfd5,
		list-border-color1: #e4e4e4,
		list-border-color2: #e7ebee,
		list-border-color3: #f1f1f1,
		button-border-color: #b5d4ef,
		
		shadow-color: #e4e4e4,
		shadow-color2: #d4e3fe,
		shadow-color3: #e4e4e4,
		
		icon-color: #1f3f59,

		text1: #041b3a,
		text2: #333,
		text3: #666,
		text4: #999,
		text5: #6d87a8,
		text6: #879aa8,
		text7: #7b858e,
		text8: #3e64fd,
		text9: #4e607b,
		text10: #999,
		text11: #c5cfd5,
		text12: #aaa,
		
		nav-text: #041b3a,
		nav-active-text: #1f3f59,
	),
	theme-night: (//黑夜样式
		bg-color: #2d3134,
		bg-color-a: #484e53,
		
		margin-color: #1b1f22,
		btn-color: #2d3134,
		btn-color2: #2d3134,
		btn-color3: #2d3134,
		box-bg-color: #373a3e,
		box-bg-color2: #c0c4cc,
		box-bg-color3: #373a3e,
		
		pop-bg-color: rgba(49, 45, 52, .9),
		
		input-border-color1: #5f6472,
		input-border-color2: #3f434a,
		list-border-color1: #3f434a,
		list-border-color2: #3f434a,
		list-border-color3: #3f434a,
		button-border-color: #1f8dfe,
		
		shadow-color: #707376,
		shadow-color2: #45484c,
		shadow-color3: #45484c,
		
		icon-color: #fff,

		text1: #fff,
		text2: #fff,
		text3: #bfbfbf,
		text4: #bfbfbf,
		text5: #fff,
		text6: #bfbfbf,
		text7: #bfbfbf,
		text8: #fff,
		text9: #bfbfbf,
		text10: #fff,
		text11: #bfbfbf,
		text12: #bfbfbf,
		
		nav-text: #bfbfbf,
		nav-active-text: #3e64fd,
	)
);

//遍历主题map
@mixin themeify {
	@each $theme-name, $theme-map in $themes {
		//!global 把局部变量强升为全局变量
		$theme-map: $theme-map !global;
		//这步是判断html的data-theme的属性值  #{}是sass的插值表达式
		//& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
		[data-theme="#{$theme-name}"] & {
			@content;
		}
	}
}
//声明一个根据Key获取颜色的function
@function themed($key) {
	@return map-get($theme-map, $key);
}

//自定义样式
@mixin bg_color($color) {
	@include themeify {
		background-color: themed($color);
	}
}

@mixin text_color($color) {
	@include themeify {
		color: themed($color);
	}
}

@mixin input_color($color) {
	@include themeify {
		color: themed($color);
		-webkit-text-fill-color: themed($color);
	}
}

@mixin border_color($color) {
	@include themeify {
		border-color: themed($color);
	}
}

@mixin triangle_arrow($color, $size) {
	@include themeify {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: $size solid themed($color);
	}
}
@mixin triangle_arrow_down($color, $size, $size-top) {
	@include themeify {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-top: $size-top solid themed($color);
	}
}

@mixin box_shadow($color) {
	@include themeify {
		box-shadow: 0 .1rem .16rem themed($color);
	}
}
@mixin box_shadow2($color) {
	@include themeify {
		box-shadow: 0rem -0.2rem 0rem themed($color);
	}
}
@mixin box_shadow3($color) {
	@include themeify {
		box-shadow: 0rem -0.1rem .5rem themed($color);
	}
}

